<!--内容相关通知-->
<template>
    <div class="message-container">
        <!--无数据时的显示策略-->
        <el-empty v-if="messageList.length === 0" style="margin: 0 auto"></el-empty>
        <div v-else class="autobox-container-ar">
            <!--博客列表开始-->
            <div class="blog-list">
                <!-- 卡片 -->
                <div class="blog-item" v-for="item in messageList" :key="item.messageId">
                    <router-link :to="`/contentdetail/${item.targetType}/${item.targetId}`">
                        <!-- 内容主体区域 -->
                        <div class="blog-main-content">
                            <div style="display: flex; align-items: center; justify-content: space-between">
                                <!-- 标题 + 内容（左） -->
                                <div :style="item.cover ? 'width: 550px' : 'width: 700px'" >
                                    <div class="blog-desc">
                                        <span>{{item.sender?.username}}</span>
                                        {{ truncateText(stripHtml(item.content), 150) }}:
                                        <span style="color: #1677ff">{{item.targetContent?.title}}</span>
                                    </div><!-- DOMPurify 库去除HTML标签 -->
                                </div>
                            </div>
                            <!--分类标签区域 靠右-->
                            <div class="blog-meta">
                                <span class="publish-time">{{ item.createdAt.split(' ')[0] }}</span>
                            </div>
<!--                            <span v-if="item.status === '未读'" class="notification-badge"></span>-->
                        </div>
                    </router-link>
                </div>
            </div>
            <!--博客列表结束-->
            <el-pagination
                v-model:current-page="pageNum"
                v-model:page-size="pageSize"
                :total="total"
                @current-change="loadMessages"
                @size-change="loadMessages"
            ></el-pagination>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue';
import request from '@/utils/request';
import { ElMessage, ElMessageBox } from 'element-plus';
import router from '@/router';
import DOMPurify from "dompurify";

//获取本地存储中的用户信息
let user;
const loginUser = localStorage.getItem('code_user');
if (loginUser) {
    // 将拿到的Json数据转化为JavaScript对象
    user = JSON.parse(loginUser);
}

const messageList = ref([]);
const pageNum = ref(1);
const pageSize = ref(10);
const total = ref(0);

// 加载消息列表
const loadMessages = () => {
    request.get('/api/interaction/list', {
        params: {
            pageNum: pageNum.value,
            pageSize: pageSize.value,
            receiverId: user.user_id
        }
    }).then(res => {
        if (res.code === '200') {
            messageList.value = res.data.list;
            console.log(messageList.value)
            total.value = res.data.total;
        } else {
            ElMessage.error(res.msg);
        }
    });
};

// 安全地移除HTML标签并提取纯文本
const stripHtml = (html) => {
    if (!html) return '';

    // 使用DOMPurify清理HTML，防止XSS攻击，不允许img标签
    const clean = DOMPurify.sanitize(html, {
        ALLOWED_TAGS: []
    });

    // 创建临时元素提取文本内容
    const temp = document.createElement('div');
    temp.innerHTML = clean;

    // 获取纯文本内容并去除多余空格
    return (temp.textContent || temp.innerText || '').trim();
};

// 截断文本并添加省略号
const truncateText = (text, length) => {
    if (text.length <= length) return text;

    // 找到最后一个完整的单词
    let truncated = text.substring(0, length);
    let lastSpace = truncated.lastIndexOf(' ');

    // 如果找到了空格，在空格处截断以避免单词被截断
    if (lastSpace !== -1) {
        truncated = truncated.substring(0, lastSpace);
    }

    return truncated + '...';
};

onMounted(() => {
    loadMessages();
});
</script>

<style scoped>
/*中间内容区域容器：*/
.autobox-container-ar {
    position: absolute;
    width: 965px;
    box-sizing: border-box;
    background-color: #fffefb;
    min-height: 80vh;
}

/*卡片样式*/
.blog-item {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 22px;
    padding: 10px;
    border-bottom: 2px #f5f4f1 solid;
    transition: transform 0.3s, box-shadow 0.3s;
    border-radius: 10px;
    margin: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); /* 轻微外阴影 */
}
.blog-item:hover {
    background-color: #f5f4f1;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.10); /* 轻微外阴影 */
}

/* 内容主体区域样式 */
.blog-main-content {
    display: flex;
    flex-direction: column;
}

/*内容样式*/
.blog-desc {
    font-size: 15px;
    line-height: 1.6;
    color: #4f4f4f;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3; /* 限制3行 */
    padding: 10px 0;
}

/*分类标签样式*/
.blog-meta {
    position: absolute;
    right: 30px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: #666;
    margin-left: 10px;
}

.notification-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    background-color: #ff4d4f;
    color: white;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>